<template>
	<view>
		<scroll-view>
            <view class="info">
                <view>
                    <view>此页面展示所有的自定义组件</view>
                    <view>（杜绝没有必要的重复造轮子）</view>
                </view>
            </view>
            <view class="show-view">
                <view class="show-text">店铺组件 (场景：我的收藏)</view>
                <view class="show">
                    <shop-cell-search
                        :shopName="'小米官方旗舰店'"
                        :shopLogo="'http://shoptnt-statics.oss-cn-beijing.aliyuncs.com/demo/9AA9FBBCA1D74AEE964628AB2BF601A9.jpg'"
                    ></shop-cell-search>
                </view>
            </view>

            <view class="show-view">
                <view class="show-text">价格展示组件 (场景：所有价格展示的地方)</view>
                <view class="show">
                    <custom-price :price="12.22" :fontWeight="600" :size="33"></custom-price>
                </view>
            </view>
            <view class="show-view">
                <view class="show-text">商品Cell组件 (场景：购物车页,我的订单页等等)</view>
                <view class="show">
                    <goods-info
                        :goodsName="'【向往的生活同款】小米10 双模5G 骁龙865 1亿像素8K电影相机 对称式立体声 8GB+256GB 钛银黑'"
                        :goodsSpecList="'黄色 - L码'"
                        :goodsImg="'https://img14.360buyimg.com/n0/jfs/t1/91087/36/12227/66469/5e44f450E4a424f4e/7d23ad95ca25f0b4.jpg'"
                        :goodsPrice="1299.99"
                    ></goods-info>
                </view>
            </view>
            <view class="show-view">
                <view class="show-text">商品Cell组件2 (场景：搜索商品列表,我的收藏页等等)</view>
                <view class="show">
                    <goods-cell-search
                        :doublerowShow="false"
                        :goodsName="'【向往的生活同款】小米10 双模5G 骁龙865 1亿像素8K电影相机 对称式立体声 8GB+256GB 钛银黑'"
                        :goodsImg="'https://img14.360buyimg.com/n0/jfs/t1/91087/36/12227/66469/5e44f450E4a424f4e/7d23ad95ca25f0b4.jpg'"
                        :goodsPrice="1299.99"
                    ></goods-cell-search>
                </view>
            </view>
            <view class="show-view">
                <view class="show-text">商品Cell组件3 (场景：搜索商品列表,我的收藏页等等)</view>
                <view class="show">
                    <view class="goods-list u-flex">
                        <goods-cell-search
                            :doublerowShow="true"
                            :goodsName="'【向往的生活同款】小米10 双模5G 骁龙865 1亿像素8K电影相机 对称式立体声 8GB+256GB 钛银黑'"
                            :goodsImg="'https://img14.360buyimg.com/n0/jfs/t1/91087/36/12227/66469/5e44f450E4a424f4e/7d23ad95ca25f0b4.jpg'"
                            :goodsPrice="1299.99"
                        ></goods-cell-search>
                        <goods-cell-search
                            :doublerowShow="true"
                            :goodsName="'【向往的生活同款】小米10 双模5G 骁龙865 1亿像素8K电影相机 对称式立体声 8GB+256GB 钛银黑'"
                            :goodsImg="'https://img14.360buyimg.com/n0/jfs/t1/91087/36/12227/66469/5e44f450E4a424f4e/7d23ad95ca25f0b4.jpg'"
                            :goodsPrice="1299.99"
                        ></goods-cell-search>
                    </view>
                </view>
            </view>
            <view class="show-view">
                <view class="show-text">推荐商品组件 (场景：为你推荐等等)</view>
                <view class="show">
                    <goods-recommend title="为你推荐" :categoryId="491"></goods-recommend>
                </view>
            </view>
            <view class="show-view">
                <view class="show-text">地区选择组件 (场景：收货地址页等等)</view>
                <view class="show">
                    <u-field v-model="addrs" label="所在地区" placeholder="省市区县、乡镇等" placeholder-style="color: #CDCDCD" disabled right-icon="arrow-right" @click="showAddressSelector = true"></u-field>
                    <u-popup v-model="showAddressSelector" mode="bottom" length="70%" closeable close-icon-size="20" border-radius="20">
                        <region-picke @addressSelectorChanged="addressSelectorChanged" @closeRegionpicke="showAddressSelector = false" :show="showAddressSelector"></region-picke>
                    </u-popup>
                </view>
            </view>
            <view class="show-view">
                <view class="show-text">弹窗组件 (场景：个人信息页等等)</view>
                <view class="show">
                    <u-cell-item  title="昵称" :value="nickname" @click="showEditNickname = true"></u-cell-item>
                    <prompt
                        title="请输入昵称"
                        tip="2-20位字符、字母或者数字"
                        :value="nickname"
                        :show="showEditNickname"
                        @cancel="showEditNickname = false"
                        @confirm="confirm"
                        @getNickname="handleNickname">
                    </prompt>
                </view>
            </view>
            <view class="show-view">
                <view class="show-text">地址组件 (场景：地址管理页、结算页等等)</view>
                <view class="show">
                    <addr
                        :name="'shoptnt'"
                        :mobile="'13781738332'"
                        :addr_id="'1'"
                        :addr="'维多利亚'"
                        :addrs="'河北省廊坊市燕郊镇'"
                        :def_addr="'1'"
                        :tag_name="'公司'"
                        :right_icon="'edit-pen'"
                    ></addr>
                </view>
            </view>
            <view class="show-view">
                <view class="show-text">日期组件 (场景：个人信息页)</view>
                <view class="show">
                    <date-picker @onConfirm="handleBirthday">
                        <u-cell-item title="出生日期" :value="formatterBirthdayDate()"></u-cell-item>
                    </date-picker>
                </view>
            </view>
            <view class="show-view">
                <view class="show-text">更多自定义组件名称...</view>
                <view class="show">
                    更多自定义组件......
                </view>
            </view>
        </scroll-view>
	</view>
</template>

<script>
    import { Foundation } from '@/ui-utils/index.js'
	export default {
		data() {
			return {
                addrs: '',
                showAddressSelector: false ,//地区选择弹窗是否显示
                nickname: '',
                name: '',
                showEditNickname: false, //输入框弹窗是否显示
                defaultValue: ''
			};
		},
        methods: {
            //地址发生变化
            addressSelectorChanged(object) {
                const obj = {
                    addrs: object.map(key => { return key.local_name }).join(' ')
                }
                this.addrs = obj.addrs
            },
            //输入框弹窗组件 确定事件
            confirm() {
                this.nickname = this.name
                this.showEditNickname = false
            },
            // 实时监测输入框弹框组件值的变化
            handleNickname(e) {
                this.name = e.value
            },
            //生日
            handleBirthday(e) {
                this.defaultValue = Foundation.dateToUnix(e.dateValue)
            },
            //格式化生日日期
            formatterBirthdayDate() {
                return Foundation.unixToDate(this.defaultValue, 'yyyy-MM-dd')
            }
        }
	}
</script>

<style lang="scss">
.info{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 40rpx 100rpx;
    font-weight: bold;
}
.show-view {
    margin: 20rpx;
    .show-text {
        margin: 20rpx 20rpx;
    }
    .show{
        min-height: 30rpx;
        background-color: #FFFFFF;
        padding: 20rpx;
    }
}
</style>
